<template>
    <div class="starFortuneContent">
        <!-- 过场动画 -->
        <div class="beginFilm" :class="{ 'fade-out': fadeOut }" v-if="isBegin">
            <div class="star">
                <SvgIcon width="130px" height="130px" name="starFirst" color="#e9996c"></SvgIcon>
            </div>
        </div>
        <!-- 选择星座动画 -->
        <div class="selectCard fade-in" v-if="showCard">
            <div class="cardTitle">
                <p v-if="cardValue">
                    您当前选中的为：<span style="font-size: 25px;">{{ cardName }}</span>
                </p>
                <p v-else>{{ '请先选择您的星座' }}</p>
            </div>
            <div class="selectCardBox">
                <div class="selectCardItem" v-for="(item, index) in cardList" :key="index" :class="[ item.choice ? 'activeCard': '']" @click="choiceCard(item)">
                    <SvgIcon class="selectCardItemSvg" width="60px" height="60px" :name="item.icon" color="#0f0f0d"></SvgIcon>
                </div>
            </div>
            <div class="selectCardBtn" @click="goStarInfo">
                <p style="margin-right: 10px;">确</p>
                <SvgIcon width="50px" height="50px" name="starFirst" color="#e9996c"></SvgIcon>
                <p style="margin-left: 10px;">认</p>
            </div>
        </div>
        <!-- 星座信息页面展示 -->
        <div class="starInfo fade-in" v-if="showStarInfo">
            <div class="constellationInfo">
                <div class="infoTop">
                    <div class="infoTopItemBox">
                        <p class="infoTopItem" style="color: #9273ed;font-weight: 900;font-size: 18px;">
                            {{ cardName }}·今日运势
                        </p>
                        <p class="infoTopItem" v-if="constellationDayAll.summary_star">
                            <span class="infoTopItemTitle">综合运势：</span>
                            <span v-for="(star, index) in constellationDayAll.summary_star" :key="index" style="">
                                <SvgIcon width="18px" height="18px" name="star" color="rgb(248,216,82)"></SvgIcon>
                            </span>
                        </p>
                        <p class="infoTopItem" v-if="constellationDayAll.love_star">
                            <span class="infoTopItemTitle">爱情运势：</span>
                            <span v-for="(star, index) in constellationDayAll.love_star" :key="index" style="">
                                <SvgIcon width="18px" height="18px" name="star" color="rgb(248,216,82)"></SvgIcon>
                            </span>
                        </p>
                        <p class="infoTopItem" v-if="constellationDayAll.work_star">
                            <span class="infoTopItemTitle">事业运势：</span>
                            <span v-for="(star, index) in constellationDayAll.work_star" :key="index" style="">
                                <SvgIcon width="18px" height="18px" name="star" color="rgb(248,216,82)"></SvgIcon>
                            </span>
                        </p>
                        <p class="infoTopItem" v-if="constellationDayAll.money_star">
                            <span class="infoTopItemTitle">财富运势：</span>
                            <span v-for="(star, index) in constellationDayAll.money_star" :key="index" style="">
                                <SvgIcon width="18px" height="18px" name="star" color="rgb(248,216,82)"></SvgIcon>
                            </span>
                        </p>
                        <p class="infoTopItem" v-if="constellationDayAll.lucky_time">
                            <span class="infoTopItemTitle">吉时：</span>
                            {{ constellationDayAll.lucky_time }}
                        </p>
                        <p class="infoTopItem" v-if="constellationDayAll.lucky_direction">
                            <span class="infoTopItemTitle">吉利方位：</span>
                            {{ constellationDayAll.lucky_direction }}
                        </p>
                        <p class="infoTopItem" v-if="constellationDayAll.grxz">
                            <span class="infoTopItemTitle">速配星座：</span>
                            {{ constellationDayAll.grxz }}
                        </p>
                        <p class="infoTopItem" v-if="constellationDayAll.lucky_num">
                            <span class="infoTopItemTitle">幸运数字：</span>
                            {{ constellationDayAll.lucky_num }}
                        </p>
                        <p class="infoTopItem" v-if="constellationDayAll.lucky_color">
                            <span class="infoTopItemTitle">幸运颜色：</span>
                            {{ constellationDayAll.lucky_color }}
                        </p>
                    </div>
                    <div class="infoTopNumber">
                        <p style="font-size: 32px;font-weight: 700;">{{ starMark }}</p>
                        <p>今日运势</p>
                    </div>
                </div>
                <div class="infoBottom">
                    <div class="infoBottomItem" v-if="constellationDayAll.day_notice">
                        <p class="infoBottomItemTitle">今日提醒：</p>
                        <p class="infoBottomItemContent">
                            {{ constellationDayAll.day_notice }}
                        </p>
                    </div>
                    <div class="infoBottomItem" v-if="constellationDayAll.general_txt">
                        <p class="infoBottomItemTitle">综合运势：</p>
                        <p class="infoBottomItemContent">
                            {{ constellationDayAll.general_txt }}
                        </p>
                    </div>
                    <div class="infoBottomItem" v-if="constellationDayAll.love_txt">
                        <p class="infoBottomItemTitle">爱情运势：</p>
                        <p class="infoBottomItemContent">
                            {{ constellationDayAll.love_txt }}
                        </p>
                    </div>
                    <div class="infoBottomItem" v-if="constellationDayAll.work_txt">
                        <p class="infoBottomItemTitle">事业运势：</p>
                        <p class="infoBottomItemContent">
                            {{ constellationDayAll.work_txt }}
                        </p>
                    </div>
                    <div class="infoBottomItem" v-if="constellationDayAll.money_txt">
                        <p class="infoBottomItemTitle">财富运势：</p>
                        <p class="infoBottomItemContent">
                            {{ constellationDayAll.money_txt }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
    
<script setup lang="ts">
import { ref, onMounted, computed, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast, showFailToast } from 'vant'
import request from '@/utils/request'
// import { getTime } from '@/utils/plugins'
import useSettingStore from '@/store/modules/setting'
const settings = useSettingStore()


const route = useRoute()
const router = useRouter()

const isBegin = ref<boolean>(false)
const fadeOut = ref<boolean>(false)

const init = () => { // 开场动画
    settings.handlerHeaderShow(false)
    isBegin.value = true
    setTimeout(() => {
        fadeOut.value = true
    }, 1000)
    setTimeout(() => {
        settings.handlerHeaderShow(true)
        isBegin.value = false
        fadeOut.value = false
        showCard.value = true
        setTimeout(() => {
            choiceCard(cardList.value[0]) // 动画后默认选择第一张卡片
        }, 2000)
    }, 2500)
}

const showCard = ref<boolean>(false)

const cardList = ref<any>([
    {name: '白羊座', value: 'baiyang', icon: 'baiyang', choice: false,},
    {name: '金牛座', value: 'jinniu', icon: 'jinniu', choice: false,},
    {name: '双子座', value: 'shuangzi', icon: 'shuangzi', choice: false,},
    {name: '巨蟹座', value: 'juxie', icon: 'juxie', choice: false,},
    {name: '狮子座', value: 'shizi', icon: 'shizi', choice: false,},
    {name: '处女座', value: 'chunv', icon: 'chunv', choice: false,},
    {name: '天秤座', value: 'tiancheng', icon: 'tiancheng', choice: false,},
    {name: '天蝎座', value: 'tianxie', icon: 'tianxie', choice: false,},
    {name: '射手座', value: 'sheshou', icon: 'sheshou', choice: false,},
    {name: '摩羯座', value: 'mojie', icon: 'mojie', choice: false,},
    {name: '水瓶座', value: 'shuiping', icon: 'shuiping', choice: false,},
    {name: '双鱼座', value: 'shuangyu', icon: 'shuangyu', choice: false,},
])

const cardName = ref<string>('')
const cardValue = ref<string>('')

const choiceCard = (item: any) => {
    console.log(item)
    cardList.value.forEach((ele: any) => {
        ele.choice = false
    })
    item.choice = !item.choice
    cardName.value = item.name
    cardValue.value = item.value
    return
}

const showStarInfo = ref<boolean>(false)

const middle = () => { // 过场动画
    settings.handlerHeaderShow(false)
    showCard.value = false
    isBegin.value = true
    setTimeout(() => {
        fadeOut.value = true
    }, 1000)
    setTimeout(() => {
        settings.handlerHeaderShow(true)
        isBegin.value = false
        fadeOut.value = false
        showStarInfo.value = true
    }, 2500)
}

const monthDayDate = computed(() => {
    const currentDate = new Date();
    const month = currentDate.getMonth() + 1;
    const monthStr = month.toString().padStart(2, '0');
    const day = currentDate.getDate();
    console.log('date', `${monthStr}${day}`)
    return `${monthStr}${day}`
})

const reqConstellationInfo = (data: any) => request.post<any, any>(`https://route.showapi.com/872-1?showapi_appid=1783553&showapi_sign=40ebc3ff09fd4a08979bfc421db31f7d&data=${monthDayDate.value}&star=${cardValue.value}`, data)
const constellationDayAll = ref<any>([])
const starMark = ref<number>(0)

const goStarInfo = () => {
    if (!cardValue.value) {
        showToast('请先选择星座')
        return
    }
    middle()
    reqConstellationInfo({
        date: monthDayDate.value,
        // showapi_appid: '1505398', //这里需要改成自己的appid
        // showapi_sign: '38a5f6fb1abe4355bc2f0d5435372138',  //这里需要改成自己的应用的密钥secret
        star: cardValue.value,
        needTomorrow: '0',
        needWeek: '0',
        needMonth: '0',
        needYear: '0',
    }).then(res => {
        console.log('res', res)
        if (res.showapi_res_body.ret_code == 0) {
            console.log('res', res)
            // 测试数据
            // let res = {
            //     "showapi_res_error": "",
            //     "showapi_res_id": "67b6bd97fb638c08529c4fb7",
            //     "showapi_res_code": 0,
            //     "showapi_fee_num": 1,
            //     "showapi_res_body": {
            //         "star": "baiyang",
            //         "ret_code": 0,
            //         "day": {
            //             "time": "20250220",
            //             "work_star": 3,
            //             "lucky_color": "香槟金",
            //             "lucky_num": "4",
            //             "love_star": 4,
            //             "grxz": "双鱼座",
            //             "love_txt": "单身者多参加户外活动，易邂逅心仪者；有伴侣者多拥抱对方，彼此都会有浪漫的感觉。",
            //             "lucky_direction": "东南方",
            //             "money_txt": "先前有耕耘付出者，今日能获得好消息。金钱上呈现有进有出，灵活运用金钱的轨迹。有闲钱不妨拿出来做人际关系，对往后的财务往来会有帮助！",
            //             "general_txt": "工作中的计划停滞，你有点迷茫慌乱，多一分持续力便会有截然不同的结果；和他很容易就从好感转为爱意，要好好经营这份来之不易的爱情哦；会有破财的危险，凡事多留个心眼才有望规避这些风险。",
            //             "lucky_time": "22:00-00:00",
            //             "summary_star": 4,
            //             "day_notice": "爱情需要用心经营。",
            //             "money_star": 3,
            //             "work_txt": "事业运普通，脑筋会转不停，可是行动力却不太明显咧！"
            //         }
            //     }
            // }
            constellationDayAll.value = res.showapi_res_body?.day
            if (constellationDayAll.value && constellationDayAll.value.summary_star && constellationDayAll.value.love_star && constellationDayAll.value.work_star && constellationDayAll.value.money_star) {
                starMark.value = getNumber(constellationDayAll.value.summary_star, constellationDayAll.value.love_star, constellationDayAll.value.work_star, constellationDayAll.value.money_star)
            }
        } else {
            showFailToast(res.showapi_res_body.remark || '请求失败')
            router.back()
        }
    })
}

const getNumber = (summary_star: number, love_star: number, work_star: number, money_star: number) => {
    const num = (summary_star / 5 + love_star / 5 + work_star / 5 + money_star / 5) / 4
    return Math.floor(num * 100)
}

onMounted(() => {
    init()
})

</script>


<style lang="scss" scoped>
.starFortuneContent {
    width: 100%;
    height: 100vh;
    background: #0f0f0d;
    position: relative;
    // padding: 15px;
    overflow-y: auto;
    .beginFilm {
        width: 100vw;
        height: 100vh;
        background: #0f0f0d;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        .star {
            transform: translate(-50%, -50%);
            animation: rotateAnimation 4s linear infinite;
        }
    }
    @keyframes rotateAnimation {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    /* 定义淡出动画 */
    @keyframes fadeOut {
        from {
            opacity: 1; /* 结束时完全不透明 */
        }
        to {
            opacity: 0; /* 开始时完全透明 */ 
        }
    }
    /* 定义淡入动画 */
    @keyframes fadeIn {
        from {
            opacity: 0; /* 结束时完全不透明 */
        }
        to {
            opacity: 1; /* 开始时完全透明 */ 
        }
    }
    /* 应用动画到div元素 */
    .fade-out {
      animation-name: fadeOut; /* 指定动画名称 */
      animation-duration: 2s; /* 动画持续时间，这里是2秒 */
      animation-timing-function: ease; /* 动画速度曲线 */
      animation-fill-mode: forwards; /* 动画结束后保持最后一帧状态 */
    }
    .fade-in {
      animation-name: fadeIn; /* 指定动画名称 */
      animation-duration: 3.5s; /* 动画持续时间，这里是3.5秒 */
      animation-timing-function: ease; /* 动画速度曲线 */
      animation-fill-mode: forwards; /* 动画结束后保持最后一帧状态 */
    }
    .selectCard {
        width: 100%;
        min-height: 100%;
        height: auto;
        background: #0f0f0d;
        overflow: hidden;
        .cardTitle {
            width: 100%;
            margin-top: 50px;
            margin-bottom: 60px;
            text-align: center;
            p {
                font-size: 20px;
                font-weight: 500;
                color: #e9996c;
            }
        }
        .selectCardBox {
            width: 100%;
            height: 370px;
            // background: green;
            overflow-x: scroll;
            white-space: nowrap;
            .selectCardItem {
                position: relative;
                width: 200px;
                height: 80%;
                display: inline-block;
                background-image: url("@/assets/img/card.jpg");
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                overflow: hidden;
                margin-top: 25px;
                margin-right: 35px;
                border: none;
                &:nth-child(1) {
                    margin-left: 80px;
                }
                &:last-child {
                    margin-right: 80px;
                }
                transition: all 0.3s ease;
                .selectCardItemSvg {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
            .activeCard {
                transform: scale(1.1); /* 放大按钮 */
                border: 2px solid transparent;
                box-shadow: 0 0 10px rgba(255, 255, 255, 0.8), /* 外发光 */
                0 0 20px rgba(255, 255, 255, 0.6),
                0 0 30px rgba(255, 255, 255, 0.4);
                transition: box-shadow 0.3s ease; /* 平滑过渡效果 */
            }
        }
        .selectCardBtn {
            width: 100%;
            height: 80px;
            margin-top: 30px;
            margin-bottom: 50px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            p {
                font-size: 20px;
                font-weight: 500;
                color: #e9996c;
            }
        }
    }
    .starInfo {
        width: 100%;
        min-height: 100%;
        height: auto;
        background: #0f0f0d;
        overflow: hidden;
        padding: 15px;
        .constellationInfo {
            display: flex;
            flex-direction: column;
            font-size: 14px;
            overflow-y: auto;
            color: #e9996c;
            padding: 15px;
            .infoTop {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                .infoTopItemBox {
                    margin-bottom: 15px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .infoTopItem {
                        margin-bottom: 15px;
                        .infoTopItemTitle {
                            color: pink;
                            font-weight: 700;
                        }
                    }
                }
                .infoTopNumber {
                    margin-top: 30px;
                    width: 100px;
                    height: 100px;
                    border-radius: 50%;
                    border: 6px solid #d6c6f3;
                    background-color: #9273ed;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    font-weight: 500;
                    font-size: 14px;
                    color: #FFF;
                }
            }
            .infoBottom {
                margin-bottom: 50px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .infoBottomItem {
                    margin-bottom: 20px;
                    .infoBottomItemTitle {
                        font-weight: 900;
                        font-size: 16px;
                        color: pink;
                        margin-bottom: 10px;
                    }
                    .infoBottomItemContent {
                        font-size: 14px;
                        letter-spacing: 2px; /* 增加2像素的间距 */
                        line-height: 120%;
                    }
                }
            }
        }
    }
}
</style>